<template>
  <div id='form'>
    <h4> 注 册 </h4>
    <form action="">
      <div class='email'>
        <van-icon
          class='emailicon'
          size="1.2rem"
          color='#999'
          name="envelop-o" />
        <input type="text"
          placeholder="请输入邮箱"
          v-model="email">
      </div>
      <div class='password'>
        <van-icon
          class='passwordicon'
          size="1.3rem"
          color='#999'
          @click='change'
          :name="iconname" />
        <input
          :type="flag?'password':'text'"
          placeholder="请输入密码"
          v-model="password">
      </div>
      <div class='message'>
        <van-icon
          name="chat-o"
          class='messageicon'
          color='#999'
          size="1.3rem" />
        <input type="text"
          class='messageinfo'
          placeholder="请输入验证码"
          v-model="varifyCode">
        <input type="button"
          :disabled=disable
          :value='btnvalue'
          class='messagebtn'
          @click='getvarifyCode'>
      </div>

      <div class='button'>
        <input type="button"
          value=' 注 册 '
          @click='register'
          class='btn'>
      </div>
      <div>
        <a class='gores'
          href="/login">已注册？请登录</a>
      </div>

    </form>
  </div>
</template>

<script>
import { Icon } from 'vant'
import { Notify } from 'vant'

export default {
  name: '',
  data() {
    return {
      iconname: 'closed-eye',
      flag: true,
      email: '',
      password: '',
      varifyCode: '',
      btnvalue: '获取验证码',
      disable: false,
    }
  },
  components: {
    Icon,
    [Notify.Component.name]: Notify.Component,
  },
  methods: {
    change() {
      this.flag = !this.flag
      this.iconname = this.flag ? 'closed-eye' : 'eye-o'
    },
    getvarifyCode() {
      this.disable = true
      var btn = document.getElementsByClassName('messagebtn')[0]
      this.http({
        method: 'post',
        url: '/api/varifyCode',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          email: this.email,
        },
      }).then((res) => {
        if (res.data.status == 0) {
          var number = 60
          var timer = setInterval(() => {
            number--
            if (number >= 0) {
              btn.style.background = '#ccc'
              btn.style.color = '#fff'
              btn.style.border = '#fff'
              this.btnvalue = `${number}后重试`
            } else {
              this.disable = false
              this.btnvalue = '获取验证码'
              clearInterval(timer)
              timer = null
              btn.style.border = 'rgba(26, 144, 255, 0.8)'
              btn.style.background = '#fff'
              btn.style.color = 'rgba(26, 144, 255, 0.8)'
            }
          }, 1000)
        } else {
          this.disable = false
          Notify({
            type: 'warning',
            message: res.data.msg,
            duration: 800,
          })
        }
      })
    },
    register() {
      this.http({
        method: 'post',
        url: '/api/register',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          email: this.email,
          password: this.password,
          varifyCode: this.varifyCode,
        },
      }).then((res) => {
        if (res.data.status == 0) {
          Notify({
            type: 'primary',
            message: '注册成功',
            duration: 800,
            background: 'rgba(26, 144, 255, 0.8)',
          })
          window.localStorage.setItem('email', this.email)
          this.$router.replace('login')
        } else {
          this.email = ''
          this.password = ''
          this.varifyCode = ''
          Notify({
            type: 'warning',
            message: res.data.msg,
            duration: 800,
          })
        }
      })
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang='less'>
#form {
  position: absolute;
  width: 80%;
  height: 60%;
  background-color: #fff;
  border-radius: 10px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  .message {
    .messageinfo {
      width: 47%;
    }
    .messagebtn {
      width: 35%;
      height: 1.6rem;
      font-size: 1rem;
      margin-left: 0.2rem;
      background-color: #fff;
      color: rgba(26, 144, 255, 0.8);
      font-weight: 600;
      outline: none;
      vertical-align: middle;
    }
    .messageicon {
      width: 10%;
      text-align: center;
      height: 1.7rem;
      font-size: 1rem;
      vertical-align: middle;
      line-height: 1.6rem;
      margin-right: 0.2rem;
      margin-left: 0.65rem;
    }
  }
  h4 {
    color: rgba(26, 144, 255);
    font-size: 1.4rem;
    width: 100%;
    text-align: center;
    margin-top: 2.2rem;
    margin-bottom: 1.2rem;
  }
  form {
    width: 100%;
    height: 100%;
    text-align: center;
    .gores {
      font-size: 1rem;
    }
    .email,
    .password,
    .button,
    .message {
      display: inline-block;
      width: 85%;
      height: 2rem;
      border-bottom: 1px solid #999999;
      margin-bottom: 1rem;
      overflow: hidden;
      input {
        width: 80%;
        height: 100%;
        outline: none;
        border: none;
        vertical-align: middle;
        font-size: 0.8rem;
      }
      ::-ms-clear,
      ::-ms-reveal {
        display: none;
      }
      .btn {
        width: 100%;
        height: 100%;
        background-color: rgba(26, 144, 255);
        color: #fff;
        border: none;
      }
      .emailicon,
      .passwordicon {
        width: 10%;
        text-align: center;
        height: 2rem;
        font-size: 1rem;
        vertical-align: middle;
        line-height: 2rem;
        margin-right: 0.2rem;
      }
    }
    .button {
      border: none;
      height: 2rem;
    }
  }
}
</style>
